<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE HTML>
<%
    String sel1 = request.getParameter("sel1");
    String sel2 = request.getParameter("sel2");

    String jhlx = java.net.URLDecoder.decode(request.getParameter("jhlx"), "utf-8");//request.getParameter("jhlx");
    String rclx = java.net.URLDecoder.decode(request.getParameter("rclx"), "utf-8");
    String pclx = java.net.URLDecoder.decode(request.getParameter("pclx"), "utf-8");
    String bfsj = java.net.URLDecoder.decode(request.getParameter("bfsj"), "utf-8");
%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Highcharts Example</title>

    <style type="text/css">
        #container {
            height: 90vh;
            margin: 0 auto;
        }
    </style>
</head>
<body>

<script src="../../js/jquery.min.js"></script>
<%--<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>--%>
<script src="../../js/joy.loader.js" modules="form,dataview"></script>
<script src="../../js/prj/main.js"></script>
<script src="code/highcharts.js"></script>
<script src="code/highcharts-more.js"></script>
<script src="code/modules/exporting.js"></script>
<script src="code/js/themes/grid-light.js"></script>

<div id="container"></div>
<center>
    <button id="plain">水平</button>
    <button id="inverted">垂直</button>
    <button id="polar">极面</button>
</center>


<script type="text/javascript">

    $().ready(function () {

        var jhlx = "厦门市重点发展产业专业技术人才（经信局）";
        var rclx = "千人计划";
        var pclx = "拔尖人才";
        var bfsj = "百人计划";


        var title = "计划-人数";
        var totle = "人数";


        //数据初始化
        var test;
        var chart;
        joy.postJSON("/html/ps/psquery/findPerByYear.ht", {
            jhlx: jhlx,
            rclx: rclx,
            pclx: pclx,
            bfsj: bfsj
        }, function (resultObject) {
            var listX = resultObject.returnX;//resultObject.returnX; //x类型 年度
            var list1 = resultObject.return1;//resultObject.returnY; //计划类型一
            var list2 = resultObject.return2;//resultObject.returnZ; //计划类型二
            var list3 = resultObject.return3;//resultObject.returnY; //计划类型三
            var list4 = resultObject.return4;//resultObject.returnZ; //计划类型四

//            var result=split_array(resultObject,resultObject.length/2);
            test(listX, list1, list2,list3, list4, title, totle);
        });



        function test(result1, result2, result3, result4,result5, title, totle) {
            chart = Highcharts.chart('container', {
                plotOptions: {
                    column: {
                        dataLabels: {
                            enabled: true, // dataLabels设为true
//                            style:{
//                                color:'#D7DEE9'
//                            }
                        }
                    }
                },

                title: {
                    text: title
                },

                subtitle: {
                    text: ''
                },

                xAxis: {
                    categories: result1
                },

                yAxis: {
                    min: 0,
                    title: {
                        text: '总量'
                    },
                    stackLabels: {
                        enabled: true,
                        style: {
                            fontWeight: 'bold',
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                        }
                    }
                },
//                legend: {
//                    align: 'right',
//                    x: -30,
//                    verticalAlign: 'top',
//                    y: 5,
//                    floating: true,
//                    backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
//                    borderColor: '#CCC',
//                    borderWidth: 1,
//                    shadow: false
//                },

                tooltip: {
                    formatter: function () {
                        return '<b>' + this.x + '</b><br/>' +
                                this.series.name + ': ' + this.y + '<br/>' +
                                '总量: ' + this.point.stackTotal;
                    }
                },

                plotOptions: {
                    column: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: true,
                            color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                            style: {
                                textShadow: '0 0 3px black'
                            }
                        }
                    }
                },

                series: [
                    {
                        name: jhlx,
                        type: 'column',
                        data: result2,

                    },
                    {
                        name: rclx,
                        type: 'column',
                        data: result3,
                    },
                    {
                        name: pclx,
                        type: 'column',
                        data: result4,

                    },{
                        name: bfsj,
                        type: 'column',
                        data: result5,
                    }
                ]
            });
        }

        $('#plain').click(function () {
            chart.update({
                chart: {
                    inverted: false,
                    polar: false
                },
                subtitle: {
                    text: ''
                }
            });
        });

        $('#inverted').click(function () {
            chart.update({
                chart: {
                    inverted: true,
                    polar: false
                },
                subtitle: {
                    text: ''
                }
            });
        });


        $('#polar').click(function () {
            chart.update({
                chart: {
                    inverted: false,
                    polar: true
                },
                subtitle: {
                    text: ''
                }
            });
        });

    })


</script>
</body>
</html>
